<template>
  <page-layout :noToolbar="true">
    <div slot="toolbar">
      <!--<el-button size="small" round @click="save()">保存</el-button>-->
    </div>
    <div class="card-header">系统配置</div>
    <el-card class="box-card">
      <el-form label-width="150px" inline>
      <el-form-item label="App活动页配置">
        <image-uploader v-model="appVersion.image" :max-size="10240" :width="380" :height="190"></image-uploader>
      </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveImg">更换图片</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <el-form label-width="150px" inline>
        <el-form-item label="安全知识大讲堂">
          <el-input v-model="appVersion.hall" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveHall">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <el-form label-width="150px" inline>
        <el-form-item label="H5版本号">
          <el-input v-model="appVersion.h5_version" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveH5Version">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <el-form ref="appVersion" :model="appVersion" label-width="150px">
        <el-form-item label="App版本号">
          <el-input v-model="appVersion.version" style="width: 300px;"/>
        </el-form-item>
        <el-form-item label="Android下载地址">
          <el-row :gutter=10>
            <el-col :span="6" style="width: 300px;">
              <el-input v-model="appVersion.downurl" style="width: 300px;"/>
            </el-col>
            <el-col :span="6" style="width: 200px;margin-left: 10px;">
              <!--<apk-uploader v-model="appVersion.downurl" :max-size="102400"></apk-uploader>-->
              <el-upload
                class="upload-demo"
                ref="uploadApk"
                :action="uploadUrl"
                :multiple="false"
                :limit="1"
                :on-success="handleSuccess"
                :auto-upload="autoUpload"
                :data="postData"
                :on-change="fileChange"
                :before-upload="beforeUpload"
                :file-list="apkFile" style="width: 200px;">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传apk文件，且不超过100MB</div>
              </el-upload>
            </el-col>
          </el-row>
          <el-button type="primary" @click="saveAppVersion">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <div class="card-header">内部员工每日练习配置</div>
      <el-form ref="trainForm" :model="trainForm" label-width="150px">
        <el-form-item label="员工分类">
          <el-select v-model="trainForm.usertype" placeholder="请选择" style="width: 300px;">
            <el-option
              v-for="item in UserTypes"
              :key="item.value"
              :label="item.text"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="每日练习题目数量">
          <el-input v-model="trainForm.num" type="number" style="width: 300px;"/>
          <el-button type="primary" @click="saveTrans">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <el-form label-width="150px">
        <el-form-item label="关于我们的配置" prop="content">
          <!--<editor v-model="aboutForm.content" height="300px"></editor>-->
          <u-editor v-model="aboutForm.content" ></u-editor>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveAbout">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <el-form label-width="150px">
        <el-form-item label="玩法介绍" prop="content">
          <!--<editor v-model="instrForm.instr" height="300px"></editor>-->
          <u-editor v-model="instrForm.instr" ></u-editor>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveInstr">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </page-layout>
</template>
<script>
import PageLayout from "@/components/page-layout";
import { mapGetters } from "vuex";
import ImageUploader from "@/components/image-uploader";
import Status from "@/libs/status";
import Editor from "@/components/editor";
import UEditor from "@/components/u-editor";
import Api from "api/api";
import md5 from "js-md5";
export default {
  created() {
    this.refresh();
  },
  mounted() {},
  data() {
    return {
      appVersion: { image: "", version: "", downurl: "" },
      trainForm: { usertype: "zks", num: 0 },
      trains: [],
      aboutForm: { content: "" },
      instrForm: { instr: "" },
      UserTypes: Status.UserTypes,
      apkFile: [],
      headers: {
        token: "",
        clientId: "ADMIN"
      },
      autoUpload: false,
      postData: {},
      key: "",
      uploadUrl: this.$appConf.domain.uploadUrl,
      uuid: Math.random()
        .toString(36)
        .substring(3, 8)
    };
  },
  computed: {
    ...mapGetters({
      currentSetting: "currentSetting",
      uploadImgAttr: "uploadImgAttr"
    })
  },
  methods: {
    handleChange(file, fileList) {
      this.apkFile = fileList.slice(-3);
    },
    beforeUpload(file) {
      const isApk = new RegExp("application/*", "i").test(file.type);
      const isLt2M = file.size / 1024 / 1024 < 100;
      if (!isApk) {
        this.$message.error(`请选择apk类型文件`);
      }
      if (!isLt2M) {
        this.$message.error("上传大小不能超过 100MB!");
      }
      // if (isApk && isLt2M) {
      //   var tmp = `${file.lastModified + file.size + Date.now() + this.uuid}`;
      //   var nameArr = file.name.split(".");
      //   var extName = nameArr[nameArr.length - 1];
      //   this.key = md5(tmp) + "." + extName;
      //   this.token = this.getToken(this.key);
      //   console.log(111);
      // }
      return isApk && isLt2M;
    },
    fileChange(file, fileList) {
      console.log(222);
      var tmp = `${file.lastModified + file.size + Date.now() + this.uuid}`;
      var nameArr = file.name.split(".");
      var extName = nameArr[nameArr.length - 1];
      var key = md5(tmp) + "." + extName;
      console.log(key, "222");
      this.$store.dispatch("getUploadFileToken", key).then(res => {
        this.headers.token = res.data.data.token;
        this.postData.token = res.data.data.token;
        this.postData.key = res.data.data.key;
        this.autoUpload = true;
        this.$refs.uploadApk.submit();
      });
    },
    handleSuccess(res, file) {
      console.log(res, 12);
      this.appVersion.downurl = `${window.api.imageDomain}${res.key}`;
    },

    saveH5Version() {
      this.$confirm("确认更新H5版本号吗?", "提示", {})
        .then(() => {
          var tem = {};
          tem.h5 = this.appVersion.h5_version;
          this.$store.dispatch("addOrUpdateH5VersionS", tem).then(ret => {
            this.refresh();
            this.$notify({
              title: "提交成功",
              type: "success"
            });
          });
        })
        .catch(() => {});
    },
    saveHall() {
      this.$confirm("确认更新安全知识大讲堂配置吗?", "提示", {})
        .then(() => {
          var tem = {};
          tem.link = this.appVersion.hall;
          this.$store.dispatch("addOrUpdateHallSettingS", tem).then(ret => {
            this.refresh();
            this.$notify({
              title: "提交成功",
              type: "success"
            });
          });
        })
        .catch(() => {});
    },
    saveImg() {
      this.$confirm("确认更换当前活动图片吗?", "提示", {})
        .then(() => {
          this.$store
            .dispatch("addOrUpdateAppImageS", { image: this.appVersion.image })
            .then(ret => {
              this.refresh();
              this.$notify({
                title: "提交成功",
                type: "success"
              });
            });
        })
        .catch(() => {});
    },
    saveAppVersion() {
      this.$confirm("确认更新当前app版本吗?", "提示", {})
        .then(() => {
          this.$store
            .dispatch("addOrUpdateAppSettingS", {
              version: this.appVersion.version,
              downurl: this.appVersion.downurl
            })
            .then(ret => {
              this.refresh();
              this.$notify({
                title: "提交成功",
                type: "success"
              });
            });
        })
        .catch(() => {});
    },
    saveTrans() {
      this.$confirm("确认更新当前练习配置吗?", "提示", {})
        .then(() => {
          this.$store
            .dispatch("addOrUpdateTrainSettingS", this.trainForm)
            .then(ret => {
              this.refresh();
              this.$notify({
                title: "提交成功",
                type: "success"
              });
            });
        })
        .catch(() => {});
    },
    saveAbout() {
      this.$confirm("确认更新当前关于我们信息吗?", "提示", {})
        .then(() => {
          this.$store
            .dispatch("addOrUpdateAboutSettingS", this.aboutForm)
            .then(ret => {
              this.refresh();
              this.$notify({
                title: "提交成功",
                type: "success"
              });
            });
        })
        .catch(() => {});
    },
    saveInstr() {
      this.$confirm("确认更新当前玩法信息吗?", "提示", {})
        .then(() => {
          this.$store
            .dispatch("addOrUpdateInstrSettingS", this.instrForm)
            .then(ret => {
              this.refresh();
              this.$notify({
                title: "提交成功",
                type: "success"
              });
            });
        })
        .catch(() => {});
    },
    refresh() {
      this.$store.dispatch("getSettingS").then(ret => {
        console.log(ret.data.data);
        var data = ret.data.data;
        this.appVersion =
          data.appDto === null
            ? { image: "", version: "", downurl: "" }
            : data.appDto;
        this.appVersion.hall = data.hall;
        this.trains = data.trainDtos;
        if (this.trains.length > 0) {
          this.trainForm = this.trains[0];
        }
        this.aboutForm =
          data.about === undefined ? { content: "" } : { content: data.about };
        this.instrForm =
          data.instr === undefined ? { instr: "" } : { instr: data.instr };
      });
    }
  },
  components: {
    PageLayout,
    ImageUploader,
    Editor,
    UEditor
  }
};
</script>
<style>
</style>
